<template>
	<view class="w100p common_wrap">
		<view :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="w100p common_search">
			<view class="left-array" @click="goBack">
				<u-icon name="arrow-left" size="40rpx" color="#0E0E0E"></u-icon>
			</view>
			<view class="flex-box w100p search_wrap">
				<u-icon name="search" size="40rpx" color="#262728"></u-icon>
				<input type="text" :placeholder="$t('请搜索服务')" v-model="keyword" @confirm="onSearchService"
					placeholder-class="key-xxxinput-placeholder" />
			</view>
		</view>
		<view class="tabs-xxx">

			<scroll-view scroll-x>
				<view class="tabs-wrapper">
					<view :class="{ tab: true, 'active': cate_id == item.id }" v-for="(item, index) in listUnits" :key="index"
						@click="onChangeClassify(item)">
						{{ item.title }}
						<view class="line"></view>
					</view>
				</view>
			</scroll-view>
		</view>


		<view class="w100p pr list_block">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="w100p scroll-Y" refresher-enabled="true"
				@scrolltolower="lower" @refresherrefresh="fresh" refresher-background="transparent"
				:refresher-triggered="isRefresher" @refresherrestore="store" @touchmove.stop>
				<view style="height: 20rpx;"></view>

				<view class="list-wrapp">
					<view class="column-w" v-for="(list,index) in infoList" :key="index">
						<view class="list" v-for="(item, index) in list" :key="item.id" @click="goDetail(item.id)">
							<image :src="getImg(item.image)" mode="aspectFill" />
							<view class="desc-w">
								<view class="desc ellipsis_two">
									{{ item.title }}
								</view>
								<view class="bottom-see">
									<view class="jifen">
										{{$t('积分')}}<text>{{ item.score || 0}}</text>
									</view>
									<view class="see">
										<image src="/static/caigou/eyes.png"></image>
										<text>{{ item.num }}</text>
									</view>
								</view>

							</view>

						</view>
					</view>

				</view>

				<!--  -->
				<u-empty :text="$t('暂无数据')" text-size="28" v-if="infoList.length === 0" />
			</scroll-view>
		</view>

		<!-- 发布 -->
		<!-- <view class="fabu" @click="goPublish">
			<image src="/static/caigou/fabu.png"></image>
		</view> -->
	</view>
</template>

<script>


import CommonHeader from "@/pages/translate/components/common-header.vue";
import { state_index, cate_list } from '@/api/state.js';
import {
	mapState
} from 'vuex';
export default {
	components: {
		CommonHeader
	},
	computed: {
		// 使用mapState生成计算属性
		// ...mapState({
		// 	lang: state => state.commonData.lang,
		// })
	},
	watch: {
		lang(newValue, oldValue) {
			console.log('lang changed:', newValue);
		},
	},
	data() {
		return {
			categoryList: [],

			tabList: [{
				title: this.$t('采购寻单'),
				count: 0,
			}, {
				title: this.$t('我发布的'),
				count: 2,
			}, {
				title: this.$t('我参与的'),
				count: 1,
			}],
			currentTapIndex: 0,
			listUnits: [],

			// 分页相关
			scrollTop: 0,
			isRefresher: false,
			page: 1,
			isData: false, // 是否禁用上拉加载

			keyword: '',
			cate_id: '',
			infoList: [],
			statusBarHeight: uni.getStorageSync("statusBarHeight"),

		}
	},
	onLoad(val) {
		this.getClassify();
	},
	onShow() {
		this.getClassify();
	},

	methods: {
		getImg(arr) {
			if (arr.length) {
				return this.getImageUrl(arr[0].path)
			}
			return '/static/caigou/nothing.png';

		},
		onSearchService() {
			this.page = 1;
			this.getData();
		},
		// 切换分类分类筛选
		onChangeClassify(item) {
			this.cate_id = item.id;
			this.page = 1;
			this.isData = false;
			this.getData();
		},
		getClassify() {
			cate_list({
				type: 0,
			}).then((res) => {
				this.listUnits = res.data.data.data;
				if (this.listUnits.length) {
					this.cate_id = this.listUnits[0].id;
				}
				this.getData();
			})
		},
		// 返回
		goBack() {
			uni.navigateBack({
				delta: 1,
			});
		},
		goDetail(id) {
			uni.navigateTo({
				url: '/pages/translate/qustionDetail/index?goods_id=' + id,
			})
		},
		goPublish() {
			uni.navigateTo({
				url: '/pages/translate/publishService/index',
			})
		},



		// 触底加载
		lower() {
			if (this.isData) return;
			this.page++;
			this.getData();
		},
		// 下拉刷新触发
		fresh() {
			this.page = 1;
			this.isRefresher = true;
			this.isData = false;
			this.getData();
		},
		// 下拉刷新复位
		store() {
			this.isRefresher = false;
		},
		handleColumnData(data, column=2) {
			return data.reduce((total, currentValue, currentIndex) => {
				const columnIndex = currentIndex % column
				if (total[columnIndex] === undefined) {
					total[columnIndex] = []
				}
				total[columnIndex].push(currentValue)

				return total
			}, [])
		},
		// 获取{{$t('列表')}}
		async getData() {
			uni.showLoading({
				title: 'loading...',
			})
			try {
				let res = await state_index({
					page: this.page,
					keyword: this.keyword,
					cate_id: this.cate_id,

				})
				this.isRefresher = false;
				if (res.data.code == 200) {
					let data = res.data.data.data || []
					// 分成两列

					if (this.page == 1) {
						 console.log(this.handleColumnData(data),'daxxjsalfj')
						 this.infoList = this.handleColumnData(data)
					} else {
						
						this.infoList = this.handleColumnData([...[].concat(...this.infoList), ...data])
					}
					if (data.length < 10) {
						this.isData = true;
					}
				} else {
					this.isData = true;
				}
				uni.hideLoading({})

			} catch (error) {
				this.isRefresher = false;
				uni.hideLoading({})
			}
		},
	}
}
</script>

<style scoped lang="scss">
@import '@/pages/translate/common/common.scss';
@import './index.scss';
</style>


<style lang="scss">
.key-xxxinput-placeholder {
	color: #8C8C8C;
	font-size: 26rpx;
	font-weight: 400;

}
</style>